﻿<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>后台 - HTADMIN</title>
    <link rel="stylesheet" href="./plugins/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="./css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="./build/css/app.css" media="all">
    <link rel="stylesheet" href="./css/myIndex.css" media="all" />
    <style>
      /* ol li a{
       background-color: rgba(0,0,0,1)!important;
     }
       .three_this{
         background-color: #ebba92!important;
       } */
     </style>
</head>
<body>
<div class="layui-layout layui-layout-admin kit-layout-admin">
  <div class="layui-header">
    <div class="layui-logo">
      <a class="logo" href="./index.html">
      <span style="color:#ffffff">HTADMIN</span>
      </a>
      </div>
 
    <!-- 头部区域（可配合layui已有的水平导航） -->
    <ul class="layui-nav layui-layout-left">
      <li class="layui-nav-item kit-side-fold">&nbsp;&nbsp;<i class="fa fa-navicon" aria-hidden="true"></i>&nbsp;&nbsp;</li>
      <li class="layui-nav-item" data-menu="contentManagement"><a href="">UI相关</a></li>
      <li class="layui-nav-item"><a href="">常用组件</a></li>
      <li class="layui-nav-item">
        <a href="javascript:;">页面示例</a>
        <dl class="layui-nav-child">
          <dd><a href="">邮件管理</a></dd>
          <dd><a href="">消息管理</a></dd>
          <dd><a href="">授权管理</a></dd>
        </dl>
      </li>
    </ul>
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item">
        <a href="javascript:;">
          <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
          Admin
        </a>
        <dl class="layui-nav-child">
          <dd><a href="">基本资料</a></dd>
          <dd><a href="">安全设置</a></dd>
        </dl>
      </li>
      <li class="layui-nav-item"><a href="#" id="loginOut"><i class="fa fa-sign-out" aria-hidden="true"></i> 注销</a></li>
    </ul>
  </div>
  
  <div class="layui-side layui-bg-black kit-side">
    <div class="layui-side-scroll">
        <!--<div class="kit-side-fold"><i class="fa fa-navicon" aria-hidden="true"></i></div>-->
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
        <ul class="layui-nav layui-nav-tree" lay-filter="kitNavbar" kit-navbar>
                    <li class="layui-nav-item layui-nav-itemed">
                        <a class="" href="javascript:;"><i class="fa fa-columns" aria-hidden="true"></i><span>&nbsp;布局</span></a>
                        <dl class="layui-nav-child">
                             <dd>
                                <a href="javascript:;" data-url="./pages/layouts/grid.html" data-icon="fa fa-th" data-title="栅格" kit-target data-id='grid'><i class="fa fa-th" aria-hidden="true"></i><span>&nbsp;栅格</span></a>
                            </dd>
                            <dd>
                                <a href="javascript:;" data-url="./pages/layouts/admin.html" data-icon="fa fa-circle-o" data-title="后台布局" kit-target data-id='admin'><i class="fa fa-circle-o" aria-hidden="true"></i><span>&nbsp;后台布局</span></a>
                            </dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item">
                        <a class="" href="javascript:;"><i class="fa fa-clone" aria-hidden="true"></i><span>&nbsp;基本元素</span></a>
                        <dl class="layui-nav-child">
                             <dd>
                                <a href="javascript:;" data-url="./pages/ui/buttons.html" data-icon="fa fa-circle-o" data-title="按钮" kit-target data-id='buttons'><i class="fa fa-circle-o" aria-hidden="true"></i><span>&nbsp;按钮</span></a>
                            </dd>
                            <dd>
                                <a href="javascript:;" data-url="./pages/ui/forms.html" data-icon="fa fa-circle-o" data-title="表单" kit-target data-id='forms'><i class="fa fa-circle-o" aria-hidden="true"></i><span>&nbsp;表单</span></a>
                            </dd>
                            <dd>
                                <a href="javascript:;" data-url="./pages/ui/nav.html" data-icon="fa fa-circle-o" data-title="导航/面包屑" kit-target data-id='nav'><i class="fa fa-circle-o" aria-hidden="true"></i><span>&nbsp;导航/面包屑</span></a>
                            </dd>
                            <dd>
                                <a href="javascript:;" data-url="./pages/ui/tabs.html" data-icon="fa fa-circle-o" data-title="选项卡" kit-target data-id='tabs'><i class="fa fa-circle-o" aria-hidden="true"></i><span>&nbsp;选项卡</span></a>
                            </dd>
                            <dd>
                                <a href="javascript:;" data-url="./pages/ui/progress.html" data-icon="fa fa-circle-o" data-title="进度条" kit-target data-id='progress'><i class="fa fa-circle-o" aria-hidden="true"></i><span>&nbsp;进度条</span></a>
                            </dd>
                            <dd>
                                <a href="javascript:;" data-url="./pages/ui/panel.html" data-icon="fa fa-circle-o" data-title="面板" kit-target data-id='panel'><i class="fa fa-circle-o" aria-hidden="true"></i><span>&nbsp;面板</span></a>
                            </dd>
                            <dd>
                                <a href="javascript:;" data-url="./pages/ui/badge.html" data-icon="fa fa-circle-o" data-title="徽章" kit-target data-id='badge'><i class="fa fa-circle-o" aria-hidden="true"></i><span>&nbsp;徽章</span></a>
                            </dd>
                            <dd>
                                <a href="javascript:;" data-url="./pages/ui/timeline.html" data-icon="fa fa-circle-o" data-title="时间线" kit-target data-id='timeline'><i class="fa fa-circle-o" aria-hidden="true"></i><span>&nbsp;时间线</span></a>
                            </dd>
                            <dd>
                                <a href="javascript:;" data-url="./pages/ui/table.html" data-icon="fa fa-circle-o" data-title="表格" kit-target data-id='table'><i class="fa fa-circle-o" aria-hidden="true"></i><span>&nbsp;表格</span></a>
                            </dd>
                            <!--<dd>
                                <a href="javascript:;" data-url="./pages/ui/anim.html" data-icon="fa fa-circle-o" data-title="动画" kit-target data-id='anim'><i class="fa fa-circle-o" aria-hidden="true"></i><span>&nbsp;动画</span></a>
                            </dd>-->
                            <dd>
                                <a href="javascript:;" data-url="./pages/ui/auxiliar.html" data-icon="fa fa-circle-o" data-title="辅助元素" kit-target data-id='auxiliar'><i class="fa fa-circle-o" aria-hidden="true"></i><span>&nbsp;辅助元素</span></a>
                            </dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item">
                      <a class="" href="javascript:;"><i class="fa fa-laptop" aria-hidden="true"></i><span>&nbsp;组件</span></a>
                      <dl class="layui-nav-child">
                        <dd><a href="javascript:;" id="menu_three">测试</a>
                         <ol class="layui-nav-child" style="display: none;" >
                               <li><a href="javascript:;" data-url="./pages/ui/buttons.html" data-icon="fa fa-circle-o" data-title="按钮" kit-target data-id='buttons'><i class="fa fa-circle-o" aria-hidden="true"></i><span>&nbsp;按钮</span></a></li>
                               <li><a href="javascript:;">三层</a></li>
                               <li><a href="">进度条</a></li>
                            </ol>
                     </dd>
                     <dd>
                        <a href="javascript:;" data-url="./pages/assembly/upload.html" data-icon="fa fa-circle-o" data-title="文件上传" kit-target data-id='upload'><i class="fa fa-circle-o" aria-hidden="true"></i><span>&nbsp;文件上传</span></a>
                    </dd>
                    <dd>
                        <a href="javascript:;" data-url="./pages/assembly/code.html" data-icon="fa fa-circle-o" data-title="代码修饰器" kit-target data-id='code'><i class="fa fa-circle-o" aria-hidden="true"></i><span>&nbsp;代码修饰器</span></a>
                    </dd>
                    <dd>
                        <a href="javascript:;" data-url="./pages/assembly/carousel.html" data-icon="fa fa-circle-o" data-title="轮播" kit-target data-id='carousel'><i class="fa fa-circle-o" aria-hidden="true"></i><span>&nbsp;轮播</span></a>
                    </dd>
                      </dl>
                    </li>
                </ul>
  </div>
  </div>
    
  <div class="layui-body" id="container">
    <!-- 内容主体区域 -->
    <div style="padding: 15px;">内容主体区域</div>
  </div>
  
  <div class="layui-footer">
    <!-- 底部固定区域 -->
    © TRYLAB.CN - HTADMIN
  </div>
</div>
<script src="./plugins/layui/layui.js"></script>
<script>
//JavaScript代码区域
    var message;
        layui.config({base: 'build/js/'}).use(['app','jquery','layer','message'], function(app,$,layer,message) {
            //弹出修改密码
            $("#saveSet").click(function(event) {
                saveSet = layer.open({
                     type:2,
                     title:'修改密码',
                     area:["400px", "400px"],
                     content: 'changePassWord.html',
                     
                  })
            });

            $("#loginOut").click(function(event) {
                window.location.href="login.html"
            });

            app.set({
                type: 'iframe'
            }).init();
            
        });

        //JavaScript代码区域  //三级菜单
        layui.use(['element','jquery'], function(){
  var element = layui.element,$=layui.jquery;
  $("#menu_three").on("click",function(){
     $(this).next().toggle();
  })
    $("ol").on("click","li a",function(){
      $.each($(this).parent().siblings(),function(i,e){
          $(e).find("a").removeClass('three_this')
      });
        $(this).addClass('three_this');                            // 添加当前元素的样式
    })
});
</script>
</body>
</html>